Ext.Loader.setConfig( {
	enabled : true
});

Ext.require( [ '*' ]);

Ext.onReady(function() {
	// Define our data model
		Ext.define('jancode', {
			extend : 'Ext.data.Model',
			fields : [ 'categoryName', 'janCode', 'itemName', {
				name : 'itemCount',
				type : 'float'
			}, {
				name : 'zaikoCount',
				type : 'float'
			}, {
				name : 'zaikoKakuhoCount',
				type : 'float'
			} ],
			idProperty : 'janCode'
		});

		// create the Data Store
		var store = Ext.create('Ext.data.Store', {
			autoLoad : true,
			pageSize : 50,
			model : 'jancode',
			remoteSort : true,
			proxy : {
				type : 'ajax',
				url : 'getAllJanCode/',
				reader : {
					root : 'results',
					totalProperty : 'totalCount'
				}
			}
		});

		var janPanel=Ext.create('Ext.form.Panel', {
			region : 'center',
			url : 'save-form.php',
			frame : true,
			bodyStyle : 'padding:5px 5px 0',
			width : 350,
			fieldDefaults : {
				msgTarget : 'side',
				labelWidth : 75
			},
			defaultType : 'textfield',
			defaults : {
				anchor : '100%'
			},

			items : [ {
				fieldLabel : 'カテゴリ',
				xtype : 'combo',
				name : 'first',
				allowBlank : false
			}, {
				fieldLabel : 'JANCODE',
				name : 'last'
			}, {
				fieldLabel : '商品名称',
				name : 'company'
			} ],

			buttons : [ {
				text : 'Save'
			}, {
				text : 'Cancel'
			} ]
		});
		
		var newWin = Ext.create('widget.window', {
			title : 'JANCODE新規作成',
			closable : true,
			closeAction : 'hide',
			width : 600,
			height : 180,
			layout : 'border',
			bodyStyle : 'padding: 5px;',
			items : janPanel
		});
		function showDetail(record) {
			var labelWidth=75;
			var detailHeaderPanel = Ext.create('Ext.form.Panel', {
				// region : 'north',
				height : 120,
				border : false,
				frame : true,
				defaults : {
					margin : '5 5 5 5'
//					,disabled : true
				},
				items : [ {
					xtype : 'fieldcontainer',
					combineErrors : true,
					msgTarget : 'side',
					layout : 'hbox',
					items : [ {
						xtype : 'displayfield',
						width:labelWidth,
						value : '商品名：'
					}, {
						name : 'itemName',
						xtype : 'textfield',
						width : 405
						,readOnly:true
						,value:record.get('itemName')
					} ]
				}, {
					xtype : 'fieldcontainer',
					combineErrors : true,
					msgTarget : 'side',
					layout : 'hbox',
					items : [ {
						xtype : 'displayfield',
						width:labelWidth,
						value : 'カテゴリ：'
					}, {
						name : 'categoryName',
						xtype : 'textfield',
						width : 150
						,readOnly:true
						,value:record.get('categoryName')
					}, {
						xtype : 'displayfield',
						width:labelWidth,
						value : 'JANCODE:',
						margin : '0 0 0 15'
					}, {
						name : 'janCode',
						xtype : 'textfield',
						width : 150
						,readOnly:true
						,value:record.get('janCode')
					} ]
				}, {
					xtype : 'fieldcontainer',
					combineErrors : true,
					msgTarget : 'side',
					layout : 'hbox',
					items : [ {
						xtype : 'displayfield',
						width:labelWidth,
						value : '商品数：'
					}, {
						name : 'itemCount',
						xtype : 'textfield',
						width : 50
						,readOnly:true
						,value:record.get('itemCount')
					}, {
						xtype : 'displayfield',
						width:labelWidth,
						value : '在庫数:',
						margin : '0 0 0 15'
					}, {
						name : 'zaikoCount',
						xtype : 'textfield',
						width : 50
						,readOnly:true
						,value:record.get('zaikoCount')
					}, {
						xtype : 'displayfield',
						value : '在庫被確保数:',
						width:90,
						margin : '0 0 0 15'
					}, {
						name : 'zaikoKakuhoCount',
						xtype : 'textfield',
						width : 50
						,readOnly:true
						,value:record.get('zaikoKakuhoCount')
					} ]
				} ]
			});

			Ext.define('janCodeDetail',
					{
						extend : 'Ext.data.Model',
						fields : [ 'itemCode', 'itemStatus', 'nyukaDate',
								'syukaDate' ],
						idProperty : 'itemCode'
					});

			// create the Data Store
			var janCodeDetailStore = Ext.create('Ext.data.Store', {
				autoLoad : true,
				pageSize : 50,
				model : 'janCodeDetail',
				remoteSort : true,
				proxy : {
					type : 'ajax',
					url : 'getJanCodeDetail/',
					reader : {
						root : 'results',
						totalProperty : 'totalCount'
					},
					extraParams : {
						'janCode' : '1'
					}
				}
			});

			var detailGridPanel = Ext.create('Ext.grid.Panel', {
				// region : 'center',
				store : janCodeDetailStore,
				columnLines : true,
				height : 450,
				columns : [ {
					header : '製品番号',
					dataIndex : 'itemCode',
					flex : 1
				}, {
					header : '状態',
					dataIndex : 'itemStatus',
					width : 100
				}, {
					header : '入荷日時',
					dataIndex : 'nyukaDate',
					width : 100
				}, {
					header : '出荷日時',
					dataIndex : 'syukaDate',
					width : 100
				} ],
				// region: 'center',
				// title: 'JANCODE管理',
				frame : true,
				// paging bar on the bottom
				bbar : Ext.create('Ext.PagingToolbar', {
					store : store,
					displayInfo : true,
					displayMsg : 'Displaying topics {0} - {1} of {2}',
					emptyMsg : "No topics to display"
				// items:[
						// '-', {
						// text: 'Show Preview',
						// pressed: pluginExpanded,
						// enableToggle: true,
						// toggleHandler: function(btn,
						// pressed) {
						// var preview =
						// Ext.getCmp('gv').getPlugin('preview');
						// preview.toggleExpanded(pressed);
						// }
						// }]
						})
			});

			var detailWin = Ext.create('widget.window', {
				title : 'JANCODE商品リスト明細',
				closable : true,
				closeAction : 'hide',
				width : 540,
				// height : 600,
				layout : 'auto',
				bodyStyle : 'padding: 5px;',
				items : [ detailHeaderPanel, detailGridPanel ]
			});

			detailWin.show();
		}
		
		// create the grid and specify what field you want
		// to use for the editor at each column.
		var grid = Ext.create('Ext.grid.Panel', {
			store : store,
			columnLines : true,
			height : 500,
			columns : [ {
				header : 'カテゴリ',
				dataIndex : 'categoryName',
				width : 150
			}, {
				header : 'JANCODE',
				dataIndex : 'janCode',
				width : 160
			}, {
				header : '商品名',
				dataIndex : 'itemName',
				flex : 1
			}, {
				header : '商品数',
				dataIndex : 'itemCount',
				renderer: Ext.util.Format.numberRenderer('0,000'),
				width : 90
			}, {
				header : '在庫数',
				renderer: Ext.util.Format.numberRenderer('0,000'),
				dataIndex : 'zaikoCount',
				width : 90
			}, {
				header : '在庫被確保数',
				renderer: Ext.util.Format.numberRenderer('0,000'),
				dataIndex : 'zaikoKakuhoCount',
				width : 90
			} ],
			// region: 'center',
			// title: 'JANCODE管理',
			frame : true,
			tbar : [ {
				text : '<div style="font-size:13px;">新規作成</div>',
				iconCls : 'add',
				handler : function() {
					newWin.show();
				}
			}, {
				itemId : 'jandCdDelete',
				text : '削除',
				iconCls : 'remove',
				handler : function() {
					var sm = grid.getSelectionModel();
					rowEditing.cancelEdit();
					store.remove(sm.getSelection());
					if (store.getCount() > 0) {
						sm.select(0);
					}
				},
				disabled : true
			}, {
				itemId : 'jandCdDetail',
				text : '明細を見る',
				iconCls : 'remove',
				handler : function() {
					showDetail(grid.getSelectionModel().getSelection()[0]);
				},
				disabled : true
			} ],
			// paging bar on the bottom
			bbar : Ext.create('Ext.PagingToolbar', {
				store : store,
				displayInfo : true,
				displayMsg : 'Displaying topics {0} - {1} of {2}',
				emptyMsg : "No topics to display"
			// items:[
					// '-', {
					// text: 'Show Preview',
					// pressed: pluginExpanded,
					// enableToggle: true,
					// toggleHandler: function(btn, pressed) {
					// var preview = Ext.getCmp('gv').getPlugin('preview');
					// preview.toggleExpanded(pressed);
					// }
					// }]
					}),
			listeners : {
				'selectionchange' : function(view, records) {
					grid.down('#jandCdDelete').setDisabled(!records.length);
					grid.down('#jandCdDetail').setDisabled(!records.length);
				},
				'itemdblclick' : function(view, record, item, index) {
					// alert(record.get('itemName'));
				showDetail(record);
			}

			}
		});

		var searchPanel = Ext.create('Ext.form.Panel', {
			// region: 'north',
			height : 80,
			border : false,
			frame : true,
			defaults : {
				margin : '15 5 5 5'
			},
			items : [ {
				xtype : 'fieldcontainer',
				combineErrors : true,
				msgTarget : 'side',
				layout : 'hbox',
				items : [ {
					xtype : 'displayfield',
					value : 'カテゴリ：'
				}, {
					name : 'hours',
					xtype : 'combo',
					width : 200
				}, {
					xtype : 'displayfield',
					value : 'JANCODE:',
					margin : '0 0 0 15'
				},

				{
					name : 'minutes',
					xtype : 'textfield',
					width : 200
				} ]
			} ],
			buttons : [
					{
						text : '検索',
						handler : function() {
							var form = this.up('form').getForm(), s = '';
							if (form.isValid()) {
								Ext.iterate(form.getValues(), function(key,
										value) {
									s += Ext.util.Format.format(
											"{0} = {1}<br />", key, value);
								}, this);

								Ext.Msg.alert('Form Values', s);
							}
						}
					},

					{
						text : 'Reset',
						handler : function() {
							this.up('form').getForm().reset();
						}
					} ]
		});

		Ext.create('Ext.panel.Panel', {
			title : '商品管理＞JANCODE管理',
			layout : 'auto',
			items : [ searchPanel, grid ],
			// height : 500,
			renderTo : 'bodyarea'
		});

	});
